<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>翻译工具 - 多语言旅行助手</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="top-nav">
        <a href="index.html" class="logo">
            <img src="images/vector_25_246.svg" alt="多语言旅行助手品牌标识" height="32">
        </a>
        <div class="nav-actions" style="display: flex; gap: 16px; align-items: center;">
            <div class="language-selector">
                <img src="images/vector_25_458.svg" alt="语言选择图标" width="20" height="20">
                <span>中文简体</span>
            </div>
            <button class="menu-btn">
                <img src="images/vector_25_247.svg" alt="菜单图标" width="24" height="24">
            </button>
        </div>
    </header>

    <!-- 内容区 -->
    <main class="content translation-content">
        <h1 class="page-title">文本翻译</h1>
        
        <div class="translation-container">
            <div class="language-select">
                <div class="lang-dropdown">
                    <select id="source-lang">
                        <option value="zh">中文</option>
                        <option value="en">英文</option>
                        <option value="ja">日文</option>
                        <option value="ko">韩文</option>
                        <option value="fr">法文</option>
                        <option value="de">德文</option>
                        <option value="es">西班牙文</option>
                        <option value="it">意大利文</option>
                    </select>
                </div>
                <button id="swap-lang" class="swap-btn">
                    <img src="images/vector_25_443.svg" alt="交换语言" width="24" height="24">
                </button>
                <div class="lang-dropdown">
                    <select id="target-lang">
                        <option value="en">英文</option>
                        <option value="zh">中文</option>
                        <option value="ja">日文</option>
                        <option value="ko">韩文</option>
                        <option value="fr">法文</option>
                        <option value="de">德文</option>
                        <option value="es">西班牙文</option>
                        <option value="it">意大利文</option>
                    </select>
                </div>
            </div>
            
            <div class="translation-area">
                <div class="input-area">
                    <textarea id="input-text" placeholder="输入需要翻译的文本"></textarea>
                    <div class="input-actions">
                        <button id="clear-btn" class="secondary-btn">清空</button>
                        <button id="voice-input-btn" class="secondary-btn">
                            <img src="images/vector_25_442.svg" alt="语音输入" width="20" height="20">
                            语音输入
                        </button>
                    </div>
                </div>
                
                <button id="translate-btn" class="primary-btn">翻译</button>
                
                <div class="output-area">
                    <div id="output-text" class="output-text"></div>
                    <div class="output-actions">
                        <button id="copy-btn" class="secondary-btn">复制</button>
                        <button id="listen-btn" class="secondary-btn">
                            <img src="images/vector_25_442.svg" alt="朗读" width="20" height="20">
                            朗读
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="context-suggestions">
                <h3>情境化翻译建议</h3>
                <div class="context-tags">
                    <span class="context-tag" data-context="restaurant">餐厅用语</span>
                    <span class="context-tag" data-context="hotel">酒店用语</span>
                    <span class="context-tag" data-context="transportation">交通用语</span>
                    <span class="context-tag" data-context="shopping">购物用语</span>
                    <span class="context-tag" data-context="emergency">紧急情况</span>
                </div>
                <div id="context-content" class="context-content"></div>
            </div>
        </div>
        
        <div class="translation-modes">
            <button class="mode-btn active" data-mode="text">
                <img src="images/vector_25_435.svg" alt="文本翻译" width="24" height="24">
                <span>文本翻译</span>
            </button>
            <button class="mode-btn" data-mode="voice">
                <img src="images/vector_25_442.svg" alt="语音翻译" width="24" height="24">
                <span>语音翻译</span>
            </button>
            <button class="mode-btn" data-mode="camera">
                <img src="images/vector_25_482.svg" alt="拍照翻译" width="24" height="24">
                <span>拍照翻译</span>
            </button>
        </div>
    </main>

    <!-- 侧边导航栏 -->
    <aside class="side-nav">
        <ul>
            <li>
                <a href="index.html">
                    <img src="images/vector_25_303.svg" alt="首页图标">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="translation.html" class="active">
                    <img src="images/vector_25_310.svg" alt="翻译图标">
                    <span>翻译</span>
                </a>
            </li>
            <li>
                <a href="map.html">
                    <img src="images/vector_25_317.svg" alt="地图图标">
                    <span>地图</span>
                </a>
            </li>
            <li>
                <a href="offline-content.html">
                    <img src="images/vector_25_324.svg" alt="离线内容图标">
                    <span>离线内容</span>
                </a>
            </li>
            <li>
                <a href="settings.html">
                    <img src="images/vector_25_331.svg" alt="设置图标">
                    <span>设置</span>
                </a>
            </li>
        </ul>
    </aside>

    <script src="script.js"></script>
    <script>
        // 翻译功能
        const translateBtn = document.getElementById('translate-btn');
        const inputText = document.getElementById('input-text');
        const outputText = document.getElementById('output-text');
        const sourceLang = document.getElementById('source-lang');
        const targetLang = document.getElementById('target-lang');
        const swapLangBtn = document.getElementById('swap-lang');
        const clearBtn = document.getElementById('clear-btn');
        const copyBtn = document.getElementById('copy-btn');
        const listenBtn = document.getElementById('listen-btn');
        const voiceInputBtn = document.getElementById('voice-input-btn');
        const contextTags = document.querySelectorAll('.context-tag');
        const contextContent = document.getElementById('context-content');
        const modeBtns = document.querySelectorAll('.mode-btn');

        // 翻译功能
        translateBtn.addEventListener('click', async () => {
            const text = inputText.value;
            if (!text) return;
            
            outputText.innerHTML = '<div class="loading">翻译中...</div>';
            
            try {
                const response = await fetch('http://localhost:5000/api/translate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        text: text,
                        source_lang: sourceLang.value,
                        target_lang: targetLang.value
                    }),
                });
                
                const data = await response.json();
                if (data.error) {
                    outputText.textContent = `错误: ${data.error}`;
                } else {
                    outputText.textContent = data.translated_text;
                }
            } catch (error) {
                outputText.textContent = `翻译服务暂时不可用: ${error.message}`;
                console.error('翻译错误:', error);
            }
        });

        // 交换语言
        swapLangBtn.addEventListener('click', () => {
            const tempLang = sourceLang.value;
            sourceLang.value = targetLang.value;
            targetLang.value = tempLang;
            
            // 如果已有翻译结果，也交换输入和输出
            if (outputText.textContent && inputText.value) {
                const tempText = inputText.value;
                inputText.value = outputText.textContent;
                outputText.textContent = tempText;
            }
        });

        // 清空输入
        clearBtn.addEventListener('click', () => {
            inputText.value = '';
            outputText.textContent = '';
        });

        // 复制翻译结果
        copyBtn.addEventListener('click', () => {
            if (!outputText.textContent) return;
            
            navigator.clipboard.writeText(outputText.textContent)
                .then(() => {
                    const originalText = copyBtn.textContent;
                    copyBtn.textContent = '已复制';
                    setTimeout(() => {
                        copyBtn.textContent = originalText;
                    }, 2000);
                })
                .catch(err => {
                    console.error('复制失败:', err);
                });
        });

        // 语音输入
        voiceInputBtn.addEventListener('click', () => {
            if ('webkitSpeechRecognition' in window) {
                const recognition = new webkitSpeechRecognition();
                recognition.lang = sourceLang.value === 'zh' ? 'zh-CN' : 'en-US';
                recognition.continuous = false;
                recognition.interimResults = false;
                
                voiceInputBtn.textContent = '正在聆听...';
                voiceInputBtn.classList.add('listening');
                
                recognition.start();
                
                recognition.onresult = (event) => {
                    const transcript = event.results[0][0].transcript;
                    inputText.value = transcript;
                };
                
                recognition.onend = () => {
                    voiceInputBtn.innerHTML = '<img src="images/vector_25_442.svg" alt="语音输入" width="20" height="20"> 语音输入';
                    voiceInputBtn.classList.remove('listening');
                };
                
                recognition.onerror = (event) => {
                    console.error('语音识别错误:', event.error);
                    voiceInputBtn.innerHTML = '<img src="images/vector_25_442.svg" alt="语音输入" width="20" height="20"> 语音输入';
                    voiceInputBtn.classList.remove('listening');
                };
            } else {
                alert('您的浏览器不支持语音识别功能');
            }
        });

        // 朗读翻译结果
        listenBtn.addEventListener('click', () => {
            if (!outputText.textContent) return;
            
            const utterance = new SpeechSynthesisUtterance(outputText.textContent);
            utterance.lang = targetLang.value === 'zh' ? 'zh-CN' : 'en-US';
            window.speechSynthesis.speak(utterance);
        });

        // 情境化翻译建议
        contextTags.forEach(tag => {
            tag.addEventListener('click', async () => {
                const context = tag.dataset.context;
                contextTags.forEach(t => t.classList.remove('active'));
                tag.classList.add('active');
                
                contextContent.innerHTML = '<div class="loading">加载中...</div>';
                
                try {
                    const response = await fetch('http://localhost:5000/api/culture', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            query: `在${context}场景中的常用表达和礼仪`,
                            language: sourceLang.value === 'zh' ? targetLang.value : sourceLang.value
                        }),
                    });
                    
                    const data = await response.json();
                    if (data.error) {
                        contextContent.textContent = `错误: ${data.error}`;
                    } else {
                        contextContent.innerHTML = `<div class="context-info">${data.culture_info}</div>`;
                    }
                } catch (error) {
                    contextContent.textContent = `服务暂时不可用: ${error.message}`;
                    console.error('获取情境建议错误:', error);
                }
            });
        });

        // 切换翻译模式
        modeBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                modeBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                
                const mode = btn.dataset.mode;
                if (mode === 'voice') {
                    alert('语音翻译功能即将上线');
                } else if (mode === 'camera') {
                    alert('拍照翻译功能即将上线');
                }
            });
        });
    </script>
</body>
</html>